<template>
  <div class="app-container yy-activity-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">

      <el-form-item label="标题" prop="title">
        <el-input type="input" v-model="form.title"></el-input>
      </el-form-item>

      <el-form-item label="介绍" prop="introduce">
        <quill-editor
          class="editor"
          v-model="form.introduce"
          ref="introduceEditor"
          :options="editorOption"
          @blur="onEditorBlur($event,'introduce')"
        ></quill-editor>
      </el-form-item>
      <el-form-item label="说明" prop="explain">
        <quill-editor
          class="editor"
          v-model="form.explain"
          ref="explainEditor"
          :options="editorOption"
          @blur="onEditorBlur($event,'explain')"
        ></quill-editor>
      </el-form-item>

      <el-row>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="用户端">
            <el-radio-group v-model="form.isuser">
              <el-radio border :label="1">开启</el-radio>
              <el-radio border :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="美发师端">
            <el-radio-group v-model="form.isstylist" size="medium">
              <el-radio border :label="1">开启</el-radio>
              <el-radio border :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="门店端">
            <el-radio-group v-model="form.isstore" size="medium">
              <el-radio border :label="1">开启</el-radio>
              <el-radio border :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="活动时间" prop="startTime">
        <el-date-picker
          v-model="form.startTime"
          size="small"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="form.status" size="medium">
          <el-radio border :label="1">开启</el-radio>
          <el-radio border :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="封面" prop="cover" v-if="form.cover">
        <!--<el-upload
          class="avatar-uploader"
          :action="uploadImgUrl"
          name="file"
          :headers="headers"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-remove="handleAvatarRemove"
          :on-success="handleAvatarSuccess"
          :on-change="handleAvatarChange"
          :on-error="handleAvatarError"
          accept='.jpg,.jpeg,.png,.gif'>
          <img v-if="form.cover" :src="form.cover" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>-->
        <UploadImage @change="imageChange" :path="form.cover"></UploadImage>
      </el-form-item>

      <el-form-item >
        <el-button type="primary" v-hasPermi="['main:makerActivity:add']" @click="submitForm">保 存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import UploadImage from '@/components/UploadImage';
  import {getToken} from '@/utils/auth';
  import {list, addActivity,updateActivity,changeStatus} from "@/api/maker/activity";
  import { quillEditor } from "vue-quill-editor";
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  //import {deleteFile} from "@/api/common";
  // 工具栏配置
  const toolbarOptions = [
    ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
    ["blockquote", "code-block"],                    // 引用  代码块
    [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
    [{ indent: "-1" }, { indent: "+1" }],            // 缩进
    [{ size: ["small", false, "large", "huge"] }],   // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
    [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
    [{ align: [] }],                                 // 对齐方式
    ["clean"],                                       // 清除文本格式
    //["link", "image", "video"]                       // 链接、图片、视频
  ];

  export default {
    components: {
      quillEditor,UploadImage
    },
    data() {
      return {
        editorOption: {
          theme: "snow", // or 'bubble'
          placeholder: "请输入内容",
          modules: {
            toolbar: {
              container: toolbarOptions,
            }
          }
        },
        loading: false,
        loadingInstance: undefined,
        postList: [],
        open: false,
        title: '',
        imageUrl: '',
        statusOptions: [{"dictLabel": "开启", "dictValue": 1}, {"dictLabel": "禁用", "dictValue": 0}],
        form: {
          startTime: undefined,
          title: undefined,
          introduce: undefined,
          explain: undefined,
          begintime: undefined,
          endtime: undefined,
          isuser: 1,
          isstylist: 1,
          isstore: 1,
          cover: '',
          status:1
        },
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        rules: {
          title: [
            {required: true, message: '请输入标题', trigger: 'blur'},
            {max: 50, message: '标题不能超过50个字符', trigger: 'blur'}
          ],
          introduce: [
            {required: true, message: '请输入活动介绍', trigger: 'blur'},
            {max: 5000, message: '标题不能超过5000个字符', trigger: 'blur'}
          ],
          explain: [
            {required: true, message: '请输入活动说明', trigger: 'blur'},
            {max: 5000, message: '标题不能超过5000个字符', trigger: 'blur'}
          ],
          startTime: [
            {required: true, message: '请选择活动开始时间和结束时间', trigger: 'blur'},
          ],
          cover: [
            {required: true, message: '请上传封面图片', trigger: 'blur'},
          ]
        },
        uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/aliyun/upload",
        queryParams: {pageSize: 1}
      }
    },
    created() {
      this.getList();
    },
    methods: {
      onEditorBlur(e,key){
       if(key==='introduce'){
         this.$refs.form.validateField('introduce');
       }else{
         this.$refs.form.validateField('explain');
       }
      },
      statusFormat(row, column) {
        return this.selectDictLabel(this.statusOptions, row[column.property]);
      },
      getList() {
        this.loading = true;
        list(this.queryParams).then(response => {
          if(response.rows&&response.rows.length>0){
            let row=response.rows[0];

            let begintime = this.dateFormat(row.begintime,'YYYY-MM-DD');
            let endtime = this.dateFormat(row.endtime,'YYYY-MM-DD');
            this.form=response.rows[0];
            console.log(this.form);
            //this.$set(this.form, "cover",response.rows[0].cover );
            this.$set(this.form, "startTime", [begintime, endtime]);
          }
          this.loading = false;
        });
      },
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            let endtime = this.form.startTime[1];
            let begintime = this.form.startTime[0];
            this.form.endtime = endtime + " 23:59:59";
            this.form.begintime = begintime + " 00:00:00";
            if (this.form.id){
              updateActivity(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("操作成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }else{
              addActivity(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("操作成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }

          }
        });
      },
      imageChange(message) {
        this.$set(this.form, 'cover', message);
        this.$refs.form.validateField('cover');
      },

    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }




  .ql-container{
    height: 192px;
  }

  .ql-snow .ql-tooltip[data-mode="link"]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0;
    content: "保存";
    padding-right: 0;
  }

  .ql-snow .ql-tooltip[data-mode="video"]::before {
    content: "请输入视频地址:";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: "10px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: "18px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: "32px";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "标准字体";
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "衬线字体";
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等宽字体";
  }
</style>
